import { ref, h } from 'vue'
import { Tag } from 'ant-design-vue'
import { product_getProductDetail } from '@/api/product'
export const useProduct = () => {
  const showProduct = ref(false)
  const productData = ref()
  const productColumns = ref([
    {
      title: '产品ID',
      dataIndex: 'id',
      fixed: 'left',
      width: 200
    },
    {
      title: '产品名称',
      dataIndex: 'name'
    },
    {
      title: '状态',
      dataIndex: 'shelf',
      customRender: ({ text }) => {
        return h(Tag, { color: text === 1 ? 'green' : 'red' }, () =>
          text === 1 ? '已上架' : '已下架'
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'action'
    }
  ])

  // 添加产品编辑产品
  const handleProduct = async id => {
    productData.value = undefined
    if (id) {
      await product_getProductDetail({ id }).then(res => {
        productData.value = res.data
      })
    }
    showProduct.value = true
  }
  return {
    productData,
    productColumns,
    showProduct,
    handleProduct
  }
}
